// @ts-nocheck
import 'lib-flexible';
import './showHome.less';
import '@/pages/golobo.less';
import { history } from 'umi';
import Top from '@/component/Top';
import server from '@/utlis/server';
import { CheckShieldOutline } from 'antd-mobile-icons';
import { List, Button as Buadtdon } from 'antd-mobile';
import { Sticky, Tabs, Swiper, Image } from 'react-vant';
import IMG1 from '../../images/showHomeimg/仙人指路.png';
import React, { Fragment, useEffect, useState } from 'react';
export default function showHome() {
  const [tabsIn, settabs] = useState([]);
  let [Topactive, setTopactive] = useState(0);
  let [concertdata, setconcertdata] = useState([]);
  const [namenum, setname] = useState(0);
  const [CZTP, setcztp] = useState([]);
  const [ZMHQ, setzmhq] = useState([]);
  const [exclusive, setExclusive] = useState([
    {
      img: 'https://p0.meituan.net/myvideodistribute/1dd5cd93111f9a2101ed95ba9f0ee818124610.jpg@102w_136h_1c_1e',
      title:
        '【主题升级】《万国来朝-梦回大唐元宵灯会》520特别专场-古风沉浸式实景互动演出',
      context: '影视级实景场景，专业舞美+魔术',
      distance: '245元起',
    },
    {
      img: 'https://p0.meituan.net/myvideodistribute/dc46915c3cf12ef981cbb8175b190afa1456180.jpg@102w_136h_1c_1e',
      title: '《扬名立万》沉浸式游戏剧场【演艺大世界】',
      context: '百年文化地标里的“东方百老汇”',
      distance: '588元起',
    },
    {
      img: 'https://p0.meituan.net/moviesh/76e83131404b5466319f33ad9594dd1193020.jpg@102w_136h_1c_1e',
      title: '开心麻花独角音乐喜剧《求婚女王》',
      context: '',
      distance: '120元起',
    },
  ]);
  const [lunbobo, setlunbobo] = useState([
    'https://img.meituan.net/kylisean/4d6ba21d594883f50e667e3a3cd06235185890.jpg@1035w_180h_1c_1e',
    'https://img.meituan.net/kylisean/d407605114b681ad60f529396cfe6ab7193545.jpg@1035w_180h_1c_1e',
  ]);
  const [rim, setRim] = useState([
    {
      img: 'https://p0.meituan.net/moviesh/76e83131404b5466319f33ad9594dd1193020.jpg@102w_136h_1c_1e',
      title: '开心麻花独角音乐喜剧《求婚女王》',
      context: '',
      distance: '120元起',
    },
    {
      img: 'https://p0.meituan.net/myvideodistribute/1dd5cd93111f9a2101ed95ba9f0ee818124610.jpg@102w_136h_1c_1e',
      title:
        '【主题升级】《万国来朝-梦回大唐元宵灯会》520特别专场-古风沉浸式实景互动演出',
      context: '影视级实景场景，专业舞美+魔术',
      distance: '245元起',
    },
    {
      img: 'https://p0.meituan.net/myvideodistribute/dc46915c3cf12ef981cbb8175b190afa1456180.jpg@102w_136h_1c_1e',
      title: '《扬名立万》沉浸式游戏剧场【演艺大世界】',
      context: '百年文化地标里的“东方百老汇”',
      distance: '588元起',
    },
  ]);
  const [hgood, setGood] = useState([
    {
      img: 'https://p0.meituan.net/myvideodistribute/dc46915c3cf12ef981cbb8175b190afa1456180.jpg@102w_136h_1c_1e',
      title: '《扬名立万》沉浸式游戏剧场【演艺大世界】',
      context: '百年文化地标里的“东方百老汇”',
      distance: '588元起',
    },
    {
      img: 'https://p0.meituan.net/myvideodistribute/1dd5cd93111f9a2101ed95ba9f0ee818124610.jpg@102w_136h_1c_1e',
      title:
        '【主题升级】《万国来朝-梦回大唐元宵灯会》520特别专场-古风沉浸式实景互动演出',
      context: '影视级实景场景，专业舞美+魔术',
      distance: '245元起',
    },
    {
      img: 'https://p0.meituan.net/moviesh/76e83131404b5466319f33ad9594dd1193020.jpg@102w_136h_1c_1e',
      title: '开心麻花独角音乐喜剧《求婚女王》',
      context: '',
      distance: '120元起',
    },
  ]);
  const [major, setmajor] = useState([
    {
      img: 'https://p0.meituan.net/moviesh/76e83131404b5466319f33ad9594dd1193020.jpg@102w_136h_1c_1e',
      title: '开心麻花独角音乐喜剧《求婚女王》',
      context: '',
      distance: '120元起',
    },
    {
      img: 'https://p0.meituan.net/myvideodistribute/dc46915c3cf12ef981cbb8175b190afa1456180.jpg@102w_136h_1c_1e',
      title: '《扬名立万》沉浸式游戏剧场【演艺大世界】',
      context: '百年文化地标里的“东方百老汇”',
      distance: '588元起',
    },
    {
      img: 'https://p0.meituan.net/myvideodistribute/1dd5cd93111f9a2101ed95ba9f0ee818124610.jpg@102w_136h_1c_1e',
      title:
        '【主题升级】《万国来朝-梦回大唐元宵灯会》520特别专场-古风沉浸式实景互动演出',
      context: '影视级实景场景，专业舞美+魔术',
      distance: '245元起',
    },
  ]);
  const tabStyle = (e) => {
    if (e.name !== namenum) {
      e.event.target.style.fontWeight = 700;
      setname(e.name + 1);
    } else {
      e.event.target.style.fontWeight = 100;
    }
  };
  // 数字格式化
  let numformat = (num) => {
    let str = '' + num;
    str = str.replace(/0/g, '');
    let r = str.replace(/(?=\B(\d{1})+$)/g, ',');
    return r;
  };
  let gettabsIn = async () => {
    let { data } = await server.get('/show');
    getconcertdata(data.data[0]._id);

    settabs([...tabsIn, ...data.data]);
  };
  let getconcertdata = async (id) => {
    let { data } = await server.get('/show/datas?type_id=' + id);
    if (data.data) {
      setconcertdata(data.data);
    } else {
      setcztp(data.valueSelection);
      setzmhq(data.aGreatPlaceToGoOnWeekends);
    }
  };
  useEffect(() => {
    gettabsIn();
  }, []);

  const goup = (item) => {
    // console.log(item, '123');
    history.push({
      pathname: '/ticketing',
      state: { item: { paly_id: item } },
    });
  };
  return (
    <div className="showHome">
      <div className="showhomeTop">
        <Sticky>
          <h3>演出</h3>
        </Sticky>
      </div>
      <div className="showBody">
        <Top></Top>
        <div className="demo-tabs">
          <Tabs
            active={Topactive}
            onClickTab={(e) => {
              // console.log(e);

              tabStyle(e);
            }}
            onChange={(va, index) => {
              getconcertdata(tabsIn[index]._id);
              setTopactive(index);
            }}
          >
            {tabsIn.map((item, index) => (
              <Tabs.TabPane name={item.name} key={item._id} title={item.name}>
                {Topactive == 0 ? (
                  <Fragment>
                    <img
                      src={IMG1}
                      alt=""
                      style={{ width: '100%', marginTop: '0.4rem' }}
                    />
                    <div className="AnXin-shoping">
                      <div className="AXLeft">
                        <CheckShieldOutline
                          color="red"
                          className="AXCheckicon"
                        />
                        <h4 style={{ fontWeight: 700, marginLeft: '0.1rem' }}>
                          安心购
                        </h4>
                      </div>
                      <p>假一赔十*无需赔付*极速发货*条件退款</p>
                    </div>
                    <div className="CZSelect">
                      <h3>超值精选</h3>
                      <div className="box">
                        {CZTP.map((item, index) => {
                          return (
                            <div className="box1" key={item._id}>
                              <img
                                src={item.image}
                                onClick={() => {
                                  history.push('/showdetail', { state: item });
                                }}
                                alt={item.name}
                              />
                              <h4>{item.name}</h4>
                              <p>
                                ￥{item.price}
                                <span>起</span>
                              </p>
                              <div className="Weig">
                                {numformat(item.islook)}万人围观
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                    <div className="show-lunbo">
                      <Swiper autoplay={2000}>
                        {lunbobo.map((a) => (
                          <Swiper.Item key={a}>
                            <Image lazyload src={a} />
                          </Swiper.Item>
                        ))}
                      </Swiper>
                    </div>
                    <div className="HQCSelect">
                      <div className="hqc">
                        <h3>周末好去处</h3>
                        <div className="hqcr">
                          {/* <NotesO /> */}
                          日历
                        </div>
                      </div>
                      <div className="box">
                        {ZMHQ.map((item, index) => {
                          return (
                            <div className="box1" key={item._id}>
                              <img src={item.image} alt={item.name} />
                              <h4>{item.name}</h4>
                              <p>
                                ￥{item.price}
                                <span>起</span>
                              </p>
                              <div className="Weig">
                                {numformat(item.islook)}万人围观
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </Fragment>
                ) : (
                  <Fragment></Fragment>
                )}
                {Topactive >= 1 ? (
                  <Fragment>
                    <List>
                      {concertdata.map((item) => {
                        return (
                          <List.Item key={item._id}>
                            <div className="newplays">
                              <img src={item.image} alt="" onClick={() => {}} />

                              <div>
                                <h5>{item.name}</h5>

                                <p>{item.self}</p>
                                <div className="shopbtn">
                                  <Buadtdon
                                    size="mini"
                                    shape="rounded"
                                    color="danger"
                                    onClick={() => {
                                      goup(item);
                                    }}
                                  >
                                    购票
                                  </Buadtdon>
                                </div>
                              </div>
                            </div>
                          </List.Item>
                        );
                      })}
                    </List>
                  </Fragment>
                ) : (
                  <Fragment></Fragment>
                )}
              </Tabs.TabPane>
            ))}
          </Tabs>
        </div>
      </div>
      <div className="jingxuanbd">
        <h3>精选榜单</h3>
        {/* <img className='gaoshou' src="https://obj.pipi.cn/festatic/common/media/1654501858099-top-bg.png" alt="" /> */}
        <div className="hs-bottom" style={{ marginTop: '0.5rem' }}>
          <div className="hs-dian">
            <div className="hs-dian-top">周末看什么</div>
            <div className="hs-dian-bottom">
              {exclusive.map((item, index) => {
                return (
                  <div
                    key={index}
                    className="hs-diana"
                    style={{ display: 'flex' }}
                  >
                    <div className="hs-dian-bottom-img">
                      <img className="imgaaa" src={item.img} alt="" />
                    </div>
                    <div className="hs-dian-bottom-context">
                      <p className="iiii">{item.title}</p>
                      <div className="hs-dian-jvli">
                        <p
                          className="llll"
                          style={{ color: '#ff4b33', fontSize: '0.25rem' }}
                        >
                          {item.context}
                        </p>
                        <div>{item.distance}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="hs-dian">
            <div className="hs-dian-top">沉浸体验榜</div>
            <div className="hs-dian-bottom">
              {rim.map((item, index) => {
                return (
                  <div
                    key={index}
                    className="hs-diana"
                    style={{ display: 'flex' }}
                  >
                    <div className="hs-dian-bottom-img">
                      <img className="imgaaa" src={item.img} alt="" />
                    </div>
                    <div className="hs-dian-bottom-context">
                      <p className="iiii">{item.title}</p>
                      <div className="hs-dian-jvli">
                        <p
                          className="llll"
                          style={{ color: '#ff4b33', fontSize: '0.25rem' }}
                        >
                          {item.context}
                        </p>
                        <div>{item.distance}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="hs-dian">
            <div className="hs-dian-top">热演现场榜</div>
            <div className="hs-dian-bottom">
              {hgood.map((item, index) => {
                return (
                  <div
                    key={index}
                    className="hs-diana"
                    style={{ display: 'flex' }}
                  >
                    <div className="hs-dian-bottom-img">
                      <img className="imgaaa" src={item.img} alt="" />
                    </div>
                    <div className="hs-dian-bottom-context">
                      <p className="iiii">{item.title}</p>
                      <div className="hs-dian-jvli">
                        <p
                          className="llll"
                          style={{ color: '#ff4b33', fontSize: '0.25rem' }}
                        >
                          {item.context}
                        </p>
                        <div>{item.distance}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="hs-dian">
            <div className="hs-dian-top">观剧指南榜</div>
            <div className="hs-dian-bottom">
              {major.map((item, index) => {
                return (
                  <div
                    key={index}
                    className="hs-diana"
                    style={{ display: 'flex' }}
                  >
                    <div className="hs-dian-bottom-img">
                      <img className="imgaaa" src={item.img} alt="" />
                    </div>
                    <div className="hs-dian-bottom-context">
                      <p className="iiii">{item.title}</p>
                      <div className="hs-dian-jvli">
                        <p
                          className="llll"
                          style={{ color: '#ff4b33', fontSize: '0.25rem' }}
                        >
                          {item.context}
                        </p>
                        <div>{item.distance}</div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
